import React from "react"
import { ClockCircleOutlined } from '@ant-design/icons';
import { Divider, Popconfirm, Tag } from "antd";
import statusRender from "../../status"

const orderStatus = [
  {text: '待确认', value: 'un_pay'},
  {text: '待支付', value: 'submitted'},
  {text: '支付中', value: 'paying'},
  {text: '已取消', value: 'canceled'},
  {text: '已支付', value: 'paid'},
  {text: '已超时', value: 'timeout'},
]


const columns = ({onCancelOrder, onView}) => [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 250,
    render: (i, row) => {
      return <a onClick={() => onView(row)}>{i}</a>
    }
  }, {
    title: '总金额',
    dataIndex: 'fee',
    width: 100,
    key: 'fee',
    render: (f) => {
      return <span>￥<b className={'line-stress black'}>{(f / 100).toFixed(2)}</b></span>
    }
  }, {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    key: 'status',
    filters: orderStatus,
    render: (s) => statusRender[s]
  }, {
    title: '创建时间',
    dataIndex: 'createTime',
    // width: 200,
    key: 'createTime',
    render: (d) => <Tag className={'weight'}><ClockCircleOutlined /> {d}</Tag>
  }, {
    title: '操作',
    width: 120,
    key: 'action',
    render: (a, row) => {
      return (
        <div>
          <div>
            <a onClick={() => onView(row)}>查看</a>
            <Divider type="vertical"/>
            {row.status === 'un_pay' || row.status === 'paying'
              ? <Popconfirm title={<div>确认取消订单 [<b className={'line-stress'}>{row.orderNo}</b>] 吗?</div>}
                            placement="left"
                            onConfirm={() => onCancelOrder(row)}>
                <a>取消</a>
              </Popconfirm>
              : <span>取消</span>}
          </div>
        </div>
      )
    }
  }]

export default columns